.x-dialog {
  position: relative;
  top: 100px;
  width: auto;
  margin: 0 auto;

  .x-loading {
    position: absolute;
    top: unit(unit(@dialog-header) + 1, px);
    left: 0;
    right: 0;
    bottom: unit(unit(@dialog-footer) + 1, px);
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.3);
  }

  &-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal;
    overflow: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
  }

  &-title {
    font-size: 14px;
    line-height: 34px;
    word-wrap: break-word;
  }

  &-content {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
  }

  &-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: @zindex-popup-close;
    padding: 0;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color 0.3s;

    &-x {
      display: block;
      width: 56px;
      height: @dialog-header;
      font-size: 14px;
      font-style: normal;
      line-height: @dialog-header;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
    }

    &:focus,
    &:hover {
      color: @icon-color-hover;
      text-decoration: none;
    }
  }
  &-confirm &-close-x {
    height: 56px;
    font-size: 16px;
    line-height: 56px;
  }
  &-header {
    height: @dialog-header;
    // margin: 0 20px;
    padding: 7px 20px;
    border-bottom: 1px dotted #dadada;
  }
  &-body {
    // position: relative;
    padding: @x-padding;
    word-wrap: break-word;
  }
  &-fixed &-body {
    height: calc(100vh - 240px);
    min-height: 240px;
    overflow: auto;
  }
  &-confirm &-body {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  &-footer {
    height: @dialog-footer;
    padding: 0 7px;
    text-align: right;
    border-top: 1px solid #e7e7eb;
    background-color: #f4f5f9;

    button {
      margin-top: 8px;
    }

    button + button {
      margin-left: 8px;
    }
  }

  &-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal-mask;
    height: 100%;
    background-color: @modal-mask-bg;
    filter: ~'alpha(opacity=50)';

    &-hidden {
      display: none;
    }
  }
  &-open {
    overflow: hidden;
  }

  &-centered {
    text-align: center;

    &::before {
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
      content: '';
    }
  }
  &-centered & {
    top: 0;
    margin: 0 auto;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }
  &-fixed {
    text-align: left;
    &::before {
      display: none;
    }
  }
  &-fixed & {
    top: 0;
    margin: 5em auto;
    display: block;
  }

  &-confirm &-header/* , 
  &-confirm &-close */ {
    display: none;
  }
  &-confirm {
    &-title {
      display: block;
      overflow: hidden;
      color: @heading-color;
      font-weight: 500;
      font-size: @font-size-lg;
      line-height: 1.4;
    }

    &-content {
      margin-top: 7px;
      color: @text-color;
      font-size: @font-size-base;
    }
    &-body {
      padding-top: 7px;
      > .@{icon-prefix-cls} {
        float: left;
        margin-right: 12px;
        font-size: 20px;
      }
    }

    &-body > .@{icon-prefix-cls} + &-title + &-content {
      margin-left: 32px;
    }

    &-btns {
      text-align: right;
      margin-top: 20px;

      button + button {
        margin-left: 8px;
      }
    }

    &-error &-body > .@{icon-prefix-cls} {
      color: @error-color;
    }

    &-warning &-body > .@{icon-prefix-cls},
    &-confirm &-body > .@{icon-prefix-cls} {
      color: @warning-color;
    }

    &-info &-body > .@{icon-prefix-cls} {
      color: @info-color;
    }

    &-success &-body > .@{icon-prefix-cls} {
      color: @success-color;
    }
  }
}

.@{drawer-prefix-cls} {
  position: fixed;
  z-index: @zindex-modal;
  width: 0%;
  height: 100%;

  .x-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 49px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.3);
  }

  > * {
    transition: transform @animation-duration-slow @ease-base-in,
      box-shadow @animation-duration-slow @ease-base-in;
  }

  &-content-wrapper {
    position: fixed;
  }
  .@{drawer-prefix-cls}-content {
    width: 100%;
    height: 100%;
  }

  &-left,
  &-right {
    top: 0;
    width: 0%;
    height: 100%;
    .@{drawer-prefix-cls}-content-wrapper {
      height: 100%;
    }
    &.@{drawer-prefix-cls}-open {
      width: 100%;
    }
    &.@{drawer-prefix-cls}-open.no-mask {
      width: 0%;
    }
  }

  &-left {
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-right;
      }
    }
  }

  &-right {
    right: 0;

    .@{drawer-prefix-cls} {
      &-content-wrapper {
        right: 0;
      }
    }
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-left;
      }
    }
  }

  &-top,
  &-bottom {
    left: 0;
    width: 100%;
    height: 0%;

    .@{drawer-prefix-cls}-content-wrapper {
      width: 100%;
    }
    &.@{drawer-prefix-cls}-open {
      height: 100%;
    }
    &.@{drawer-prefix-cls}-open.no-mask {
      height: 0%;
    }
  }

  &-top {
    top: 0;

    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-down;
      }
    }
  }

  &-bottom {
    bottom: 0;

    .@{drawer-prefix-cls} {
      &-content-wrapper {
        bottom: 0;
      }
    }
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-up;
      }
    }
  }

  &.@{drawer-prefix-cls}-open {
    .@{drawer-prefix-cls} {
      &-mask {
        height: 100%;
        opacity: 0.3;
        transition: none;
        animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
      }
    }
  }

  &-title {
    font-size: 14px;
    line-height: @dialog-header;
    border-bottom: 1px solid #dadada;
  }

  &-content {
    position: relative;
    z-index: 1;
    background-color: @component-background;
    background-clip: padding-box;
    border: 0;
  }

  &-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: @zindex-popup-close;
    display: block;
    width: 56px;
    height: @dialog-header;
    padding: 0;
    font-weight: 700;
    font-size: 14px;
    font-style: normal;
    line-height: @dialog-header;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color @animation-duration-slow;
    text-rendering: auto;

    &:focus,
    &:hover {
      color: @icon-color-hover;
      text-decoration: none;
    }
  }

  &-header {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: @dialog-header;
    // margin: 0 20px;
    padding: 0 20px;
    // border-bottom: 1px solid #dadada;
    background-color: #ffffff;
  }

  &-header-no-title {
    color: @text-color;
    background: @component-background;
  }

  &-body {
    padding: @x-padding;
    word-wrap: break-word;
  }

  &-header + &-body {
    // position: absolute;
    // top: @dialog-header;
    // left: 0;
    // right: 0;
    // bottom: 0;
    padding-top: unit(unit(@dialog-header) + unit(@x-padding), px);
    padding-bottom: unit(unit(@dialog-header) + unit(@x-padding), px);
    overflow: auto;

    .x-loading {
      top: 49px;
    }
  }

  &-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: @dialog-footer;
    padding: 0 7px;
    text-align: right;
    border-top: 1px solid #e7e7eb;
    background-color: #f4f5f9;

    button {
      margin-top: 8px;
    }

    button + button {
      margin-left: 8px;
    }
  }

  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: @modal-mask-bg;
    opacity: 0;
    filter: ~'alpha(opacity=50)';
    transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
  }
  &-open {
    transition: transform @animation-duration-slow @ease-base-out;
    &-content {
      box-shadow: @shadow-2;
    }
  }
}

.x-dialog, 
.@{drawer-prefix-cls} {
  &-body {
    > .x-loading-nested-loading {
      > .x-loading-container {
        .x-tabs {
          &:first-child {
            margin-top: -12px;
          }
          &-fixed {
            &:first-child {
              margin-top: 0;
            }

            @tab-fixed-height: 42px;
            .x-tabs-nav {
              position: absolute;
              top: unit(unit(@dialog-header) - unit(@tab-fixed-height), px);
              left: 12px;
              background-color: #FFFFFF;

              .x-tabs-tab {
                margin: 0 7px 0 0;
                padding: 0;

                em {
                  height: @tab-fixed-height;
                  line-height: @tab-fixed-height;
                }
              }
            }

            .x-tabs-tabpane {
              > .wrap,
              > .x-wrap {
                top: @dialog-header;
                bottom: @dialog-footer;
              }
            }
          }
        }

        > .wrap,
        > .x-wrap,
        > .x-layout {
          top: @dialog-header;
          bottom: @dialog-footer;
        }
      }
    }
  }
}

// .x-dialog, .@{drawer-prefix-cls} {
//   .@{form-prefix-cls}-item {
//     margin-bottom: 12px !important;
//   }
//   .@{form-prefix-cls}-vertical .@{form-prefix-cls}-item {
//     margin-bottom: 0 !important;
//   }
// }

@keyframes antdDrawerFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
